<template>
  <div>
    <BasicTable @register="registerTable" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';

  import { DispenseRecordList } from '@/api/device/deviceAllocation';
  import { list } from '@/api/institution/list';
  import { getBasicColumns } from './tableData';
  import { useRoute } from 'vue-router';

  const route = useRoute();
  // let defaultPrintNo: any = route.query.printerNo;

  const [registerTable] = useTable({
    title: '',
    api: DispenseRecordList,
    columns: getBasicColumns(),
    rowKey: 'id',
    useSearchForm: true,
    formConfig: {
      labelWidth: 100,
      schemas: [
        {
          field: `printerNo`,
          label: `设备编号`,
          component: 'Input',
          defaultValue: route.query.printerNo,
          colProps: {
            span: 4,
          },
        },
        {
          field: `tenantAfter`,
          label: `设备流转后机构`,
          component: 'ApiSelect',
          colProps: {
            span: 4,
          },
          componentProps: {
            api: list,
            params: { current: 1, size: 10000 },
            labelField: 'orgName',
            valueField: 'tenantId',
            showSearch: true,
            filterOption: (input: string, option: any) => {
              return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            },
          },
        },
      ],
    },
    showTableSetting: true,
    tableSetting: { fullScreen: true },
    showIndexColumn: true,
    clickToRowSelect: false,
  });
</script>

<style lang="less" scoped>
  .flex-warp {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .desc {
      margin-left: 10px;
    }
  }
  :deep(.ant-form-item-label) {
    width: 120px !important;
  }
</style>
